<template>
    <div>
        <!-- 文件弹窗 -->
        <el-dialog
            title="文件"
            :visible.sync="wenjianVisible"
            width="30%">
             <el-table
                :data="wenjianlist"
                style="width: 100%">
                <el-table-column
                    label="文件">
                    <template slot-scope="scope">
                      <el-link type="primary" @click="downloadfile(scope.row)">{{scope.row.message}}</el-link>
                    </template> 
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 图片弹窗 -->
        <el-dialog
            title="图片"
            :visible.sync="imgVisible"
            width="30%">
            <img v-for="i in imglist" :key="i.id" :src="i.message" alt="" class="xiangmuimg" @click="downloadimg(i)">
        </el-dialog>
        <!-- 更换负责人 -->
        <el-dialog
            title="承接项目"
            :visible.sync="fuzeVisible"
            width="30%">
            <el-select v-model="fuzeva" placeholder="请选择">
                <el-option
                v-for="item in allpeople"
                :key="item.id"
                :value="item.username">
                </el-option>
            </el-select>
            <el-input class="input" v-model="money" placeholder="请输入资金"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="surechangeit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 工作室成果展示表格 -->
        <el-table
            :data="proData"
            border
            row-key="id"
            :header-cell-style="headStyle"
            :cell-style="rowStyle"
            style="width: 100%;">
            <el-table-column
                prop="proName"
                label="项目名称"
                >
            </el-table-column>
            <el-table-column
                prop="chargePeople"
                label="负责人"
                >
            </el-table-column>
            <el-table-column
                prop="capital"
                label="资金"
                >
            </el-table-column>
            <el-table-column
                prop="time"
                label="时间"
                >
            </el-table-column>
            <el-table-column
                label="图片"
                width="150">
                <template slot-scope="scope">
                    <el-link type="primary" @click="seeimg(scope.row)">查看详情</el-link>
                </template>
            </el-table-column>
            <el-table-column
                label="文件"
                width="150">
                <template slot-scope="scope">
                    <el-link type="primary" @click="seewenjian(scope.row)">查看详情</el-link>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    
                    <el-button type="primary" plain size="small" @click="chengefuze(scope.row)">更换负责人</el-button>
                    <el-button type="danger" plain size="small" @click="deit(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data(){
        return {
            //项目表单
            proData:[],
            //文件弹窗
            wenjianVisible:false,
            //文件列表
            wenjianlist:[],
            //图片弹窗
            imgVisible:false,
            //图片列表
            imglist:[],
            //所有人
            allpeople:[],
            //更换负责人弹窗
            fuzeVisible:false,
            //负责人选项
            fuzeva:'',
            //资金
            money:'',
            //负责uid
            tempuid_fuze:''
        }
    },
    methods:{
        //获取所有项目
        getallpro(){
            this.$axios.post('/project/getallpro',{}).then((res)=>{
                res.data.result.forEach(i => {
                    this.proData.push(i);
                });
                this.proData.forEach(g=>{
                let newtime = g.time.substring(0,10) +' '+g.time.substring(11,19);
                g.time = newtime;
                })
            })
        },
        rowStyle(){
            return "text-align:center" 
        },
        headStyle(){
            return "text-align:center"
        },
        down(blobUrl) {
  const a = document.createElement('a');
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
},
        //查看文件
 seewenjian(row){

            this.wenjianVisible = true;
            this.wenjianlist = []
            this.$axios.post('/project/getAllFile',{Fid:row.id}).then((res)=>{
                this.wenjianlist = res.data.result
            })
        },
        //下载文件
        downloadfile(row){
             let Authorization=sessionStorage.getItem('Authorization');
           this.$axios.defaults.headers.common['Authorization'] = Authorization;
           if(Authorization===''){
                alert("token==null")
            }else{
               this.$axios({
                url:'http://39.108.110.150:8006//Wings/file/download?id='+row.id,
                method:'post',
                params: {
                    id: row.id
                },
                responseType: 'blob',
              }).then((res) => {
                    let data = res.data
                    const blob = data
                    const fileName = row.message.substring(17,)
                    const elink = document.createElement('a')
                    elink.download = fileName
                    elink.style.display = 'none'
                    elink.href = URL.createObjectURL(blob)
                    document.body.appendChild(elink)
                    elink.click()
                    URL.revokeObjectURL(elink.href) // 释放URL 对象
                    document.body.removeChild(elink)
                })

            }
        },
        //查看图片
        seeimg(row){
            // this.imgVisible = true;
            // this.imglist = []
            //     this.$axios.post('http://39.108.110.150:8006//Wings/project/getAllPic',{Fid:parseInt(row.id)}).then((res)=>{
            //     this.imglist = res.data.result
            // })
            
            this.imgVisible = true;
            this.imglist = []
            this.$axios.post('/project/getAllPic',{Fid:parseInt(row.id) }).then((res)=>{
                this.imglist = res.data.result
            })
        },
        //下载图片
        downloadimg:function(row){
          let Authorization=sessionStorage.getItem('Authorization');
           this.$axios.defaults.headers.common['Authorization'] = Authorization;
           if(Authorization===''){
                alert("token==null")
            }else{
               this.$axios({
                url:'http://39.108.110.150:8006//Wings/file/download?',
                method:'post',
                params: {
                    id: row.id
                },
                responseType: 'blob',
              }).then((res) => {
                    let data = res.data
                    const blob = data
                    const fileName = row.message.substring(17,)
                    const elink = document.createElement('a')
                    elink.download = fileName
                    elink.style.display = 'none'
                    elink.href = URL.createObjectURL(blob)
                    document.body.appendChild(elink)
                    elink.click()
                    URL.revokeObjectURL(elink.href) // 释放URL 对象
                    document.body.removeChild(elink)
                })

            }
      },

        //获取所有人
        getallpe(){
            this.$axios.post('user/findAll',{
                Headers:{Authorization:sessionStorage.getItem('token')}
            }).then((res) => {
                res.data.result.forEach(i => {
                    this.allpeople.push(i);
                });
            })
        },
        //更换负责人
        chengefuze(row){
            this.fuzeva = ''
            this.money = ''
            this.fuzeVisible = true;
            this.tempuid_fuze = row.unchangedID;
        },
        surechangeit(){
            let file = new FormData()
            file.append('capital',parseInt(this.money))
            file.append('unchangedID',this.tempuid_fuze)
            file.append('chargePeople',this.fuzeva)
            this.$axios.post('/project/proUndertakenofile',file).then(()=>{
                this.$message.success('更改成功')
                this.fuzeVisible = false
                this.$router.go(0)
            })
        },
        //删除项目
        deit(row){
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/project/deletepro',{id:row.id,unchangedID:row.unchangedID}).then(()=>{
                this.$message.success('删除成功');
                this.$router.go(0)
            })
        })
        },


    },
    //生命周期函数
    created(){
        this.getallpro();
        this.getallpe();
    }
}
</script>

<style scoped>
    .xiangmuimg{
        width: 200px;
        height: 250px;
        margin: 5px;
    }
    .input{
        width: 40%;
        display: block;
        margin: 20px auto;
    }
</style>